<div class="container">
  <!-- WRAPPER -->
  <div class="container-header bg_common">
    <!-- 标题 -->
    <div class="top_title">
      <img class="container-header__title" src="{{deployUrl}}assets/img/end-year/nvshen/round-title-4-1.png"
        alt="直通赛入围赛规则">
    </div>
    <!-- 规则 -->
    <div class="brief" style="margin-top: -0.7rem;margin-bottom:-1rem;">
      <p>
        1、比赛时间为12月16日00:00:00~21:50:00，仅限成功晋级的48名主播参与；
      </p>
      <p>
        2、比赛开始后榜单<strong>从0统计荣耀值</strong>，主播需在开播状态下在本直播间收礼才可获得荣耀值,1钻石=1荣耀值，收到宝箱礼物按照宝箱开出的礼物实际价格统计，收到神秘商店产出的礼物按1钻石=1.5荣耀值统计;

      </p>
      <p>
        3、榜单将淘汰末尾16名主播，其余32名主播将获得150000魅力积分作为基础奖金在后续比赛进行抢夺；
      </p>
    </div>
  </div>
  <!-- MAIN -->
  <div class="bg_common" style="margin-bottom: 1.5rem;">
    <!-- 入围赛已结束 -->
    <div class="container-main__end" *ngIf="haveOver">
      <div>
       <p>入围赛已结束</p>
      </div>
     </div>
     <div class="container-main__countdown" *ngIf="!haveOver">
      <img src="{{deployUrl}}assets/img/end-year/nvshen/chongcibg_21.png" alt="" class="countdown-title">
      <div class="countdown-main">
        <div style="margin-left: 0;"><p>{{hoursLeftNum}}</p></div>
        <div><p>{{hoursRightNum}}</p></div>
        <span>时</span>
        <div><p>{{fenLeftNum}}</p></div>
        <div><p>{{fenRightNum}}</p></div>
        <span>分</span>
        <div><p>{{miaoLeftNum}}</p></div>
        <div><p>{{miaoRightNum}}</p></div>
        <span style="margin-right: 0;">秒</span>
      </div>
      <div class="countdown-footer">
        活动结束后淘汰第33-48名
      </div>
    </div>
    <img src="{{deployUrl}}assets/img/end-year/common/area-1.png" alt="" class="container-main__area"  [ngClass]="{end_ac: !haveOver}">
    <!-- TOP3 -->
    <div class="container-main__top3"
      [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/shenhao/shenhao-top3-bg.png)'">
      <!-- TOP3-1,2,3 -->
      <div class="top3-item" *ngFor="let anchor of top3List,let i = index" [ngClass]="'top3-'+(i+1)">
        <div class="top3--avatar"
        (click)="gotoRoom(anchor,'anchor')"
          [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/top'+(i+1)+'.png)'">
          <img [src]="anchor.avatarUrl | headImg" [alt]="anchor.nickname">
          <img class="detail-avatar__live" src="{{deployUrl}}assets/img/end-year/common/live{{isAndroid?'.webp':'.png'}}" alt="直播中" *ngIf="anchor.liveStatus">
        </div>
        <div class="top3--nickname">{{anchor.nickname}}</div>
        <div class="top3--value">荣耀值:{{anchor.score}}</div>
        <!-- top-1 不展示距上名 展示mvp标签 -->
        <div class="top3--gap" *ngIf="i!==0">{{anchor.rankDesc}}</div>
        <div class="top3--tag" *ngIf="i===0">
          <img src="{{deployUrl}}assets/img/end-year/common/top3-mvp.png" alt="第一名">
        </div>
      </div>
    </div>
    <!-- OTHERS -->
    <div class="container-main__others">
      <div class="others-header"
        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-header-bg.png)'">
        <div class="index">排名</div>
        <div class="detail">主播信息</div>
        <div class="value">荣耀值</div>
      </div>
      <div class="others-main" *ngIf="othersList.length">
        <!-- item -->
        <div *ngFor="let anchor of othersList; let i=index">
          <img src="{{deployUrl}}assets/img/end-year/common/area-2.png" alt="" *ngIf="i===29&&!haveOver">
          <img src="{{deployUrl}}assets/img/end-year/common/area-3.png" alt="" *ngIf="i===29&&haveOver">
          <div class="others-main__item"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-item-bg.png)'">
            <div class="index">{{anchor.isWeedOut?'已淘汰':i+4}}</div>
            <div class="detail">
                <div class="detail-avatar" (click)="gotoRoom(anchor,'anchor')">
                  <img  [src]="anchor.avatarUrl | headImg"
                    [alt]="anchor.nickname">
                    <img class="live" src="{{deployUrl}}assets/img/end-year/common/live{{isAndroid?'.webp':'.png'}}" alt="直播中" *ngIf="anchor.liveStatus">
                </div>
              <div class="detail-info">
                <div class="detail-info--name" (click)="gotoRoom(anchor,'anchor')">{{anchor.nickname}}</div>
                <div class="detail-info--gap">
                  {{anchor.rankDesc}}
                </div>
              </div>
            </div>
            <div class="value">{{anchor.score}}</div>
          </div>
        </div>
        <!-- spinner -->
        <div class="getmore" *ngIf="othersList.length&&!onRefrash">
          <span>没有更多了</span>
        </div>
      </div>
      <div *ngIf="!othersList.length" class="not_li">
        <p>暂无数据</p>
      </div>
    </div>
    <div class="container-footer">
      <p *ngIf="!isAndroid && !isPC">声明：本活动与Apple Inc.无关</p>
      <p>请用户注意，适度娱乐，理性消费</p>
    </div>
  </div>
  <div class="myself">
    <div class="index" *ngIf="!currentAnchorInfo.rank">-</div>
    <div class="index" *ngIf="currentAnchorInfo.rank">{{currentAnchorInfo.rank}}</div>
    <div class="detail">
      <img class="detail-avatar" [src]="currentAnchorInfo.avatarUrl" alt="">
      <div class="detail-info">
        <div class="detail-info--name"> {{currentAnchorInfo.nickname}}</div>
        <div class="detail-info--gap">
          <span *ngIf="currentAnchorInfo.rank!==1">
            {{currentAnchorInfo.rankDesc}}
          </span>
          <img  *ngIf="currentAnchorInfo.rank===1" src="{{deployUrl}}assets/img/end-year/common/top3-mvp.png" alt="第一名">
        </div>
      </div>
    </div>
    <div class="value">{{currentAnchorInfo.score}}</div>
  </div>
</div>
